<template>
  <div style="height:100%;width:100%">
    <el-row class="mainContent" >
      <!--工具条-->
      <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
        <el-form :inline="true" :model="filters" size="small" style="text-align:left;" :rules="filte" ref="filters">
          <el-form-item prop="id">
            <el-input v-model="filters.username" placeholder="管理员名" clearable></el-input>
          </el-form-item>
          <el-form-item prop="id">
            <el-input v-model="filters.usercode" placeholder="登录名" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <div class="block">
              <el-date-picker
                v-model="filters.begtime"
                type="datetime"
                placeholder="选择日期">
              </el-date-picker>
              <el-date-picker
                v-model="filters.endtime"
                type="datetime"
                placeholder="选择日期">
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"  @click="getUsers">查询</el-button>
          </el-form-item>
          <el-form-item v-if="$store.state.routes.routes.xtAdminAdd">
            <el-button type="primary"  @click="addUsers">新增</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <!--列表-->
      <el-table :data="users" highlight-current-row  v-loading="listLoading" style="width: 100%;">
        <el-table-column prop="username" label="管理员名" >
        </el-table-column>
        <el-table-column prop="usercode" label="登录名" >
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" >
        </el-table-column>
        <el-table-column  label="状态" >
          <template slot-scope="scope">
            <span>{{scope.row.state | state}}</span>
          </template>
        </el-table-column>
        <el-table-column  label="操作" v-if="$store.state.routes.routes.xtAdmindel || $store.state.routes.routes.xtAdminState || $store.state.routes.routes.xtAdminRePwd || $store.state.routes.routes.xtAdminToRole">
          <template slot-scope="scope">
            <el-button v-if="$store.state.routes.routes.xtAdmindel"
              size="mini"
              type="text"
              @click="delAdmin(scope.$index, scope.row)">删除</el-button>
            <el-button v-if="$store.state.routes.routes.xtAdminState"
              size="mini"
              type="text"
              @click="disableAdmin(scope.$index, scope.row)">切换状态</el-button>
            <el-button v-if="$store.state.routes.routes.xtAdminRePwd"
              size="mini"
              type="text"
              @click="resetPwd(scope.$index, scope.row)">重置密码</el-button>
            <el-button v-if="$store.state.routes.routes.xtLog"
              size="mini"
              type="text"
              @click="$router.push({path:'xitong_log',query:{code:scope.row.usercode}})">操作日志</el-button>
            <el-button v-if="$store.state.routes.routes.xtAdminToRole"
              size="mini"
              type="text"
              @click="$router.push({path:'xitong_adminRoleDetail',query:{id:scope.row.id,from:'xitong_admin',name:scope.row.username}})">分配角色</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10"  :total="total" style="float:right;">
      </el-pagination>
    </el-row>
    <el-dialog title="新增管理员" :visible.sync="addUsersVisible" width="30%" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form :model="addForm" ref="addForm" status-icon label-width="100px" :rules="addFormRules" style="text-align:left">
        <el-form-item label="登录名" prop="usercode">
          <el-col :span="22">
            <el-input v-model="addForm.usercode" ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="管理员名称" prop="username">
          <el-col :span="22">
            <el-input  v-model="addForm.username" placeholder=""></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-col :span="22">
            <el-input type="password" v-model="addForm.password" placeholder=""></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="确认密码" prop="rePassword">
          <el-col :span="22">
            <el-input type="password" v-model="addForm.rePassword" placeholder=""></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addUsersVisible = false">取 消</el-button>
        <el-button type="primary" @click.native="submitAdd('addForm')" :loading="addLoading">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="重置密码" :visible.sync="dialogFormVisible" width="30%" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form :model="editForm" ref="editPwdForm" status-icon label-width="100px" :rules="editFormRules" style="text-align:left">
        <el-form-item label="新密码" prop="oldPwd">
          <el-col :span="22">
            <el-input type="password" v-model="editForm.oldPwd" placeholder=""></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="确认密码" prop="newPwd">
          <el-col :span="22">
            <el-input type="password" v-model="editForm.newPwd" placeholder=""></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click.native="submitResetPwd" :loading="editPwdLoading">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        addForm:{
          username:'',
          usercode:'',
          password:'',
          rePassword:''
        },
        editForm:{
          oldPwd:'',
          newPwd:''
        },
        editFormRules:{},
        users:[],
        page: 1,
        total: 0,
        listLoading: false,
        addLoading:false,
        filte:{},
        filters:{
          begtime:'',
          endtime:'',
          usercode:''
        },
        userId:'',
        addFormRules:{
          username: [
            { required: true, message: '请输入管理员名称', trigger: 'blur' }],
          usercode: [
            { required: true, message: '请输入登录名', trigger: 'blur' }],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }],
          rePassword: [
            { required: true, message: '请输入密码', trigger: 'blur' }],
        },
        addUsersVisible:false,
        dialogFormVisible:false,
        editPwdLoading:false
      };
    },
    filters:{
      state(val){
        switch (val){
          case 10:
            return '禁用';
            break
          case 11:
            return '正常';
            break
          case 12:
            return '禁用';
            break
        }
      }
    },
    created() {
      this.getUsers();
    },
    methods: {
      getUsers() {
        this.users = []
        this.listLoading = true;
        var obj = {
          data:{
            username:this.filters.username,
            usercode:this.filters.usercode,
            begtime:this.filters.begtime==''||this.filters.begtime==0||this.filters.begtime==null?'':Math.round(new Date(this.filters.begtime).getTime()/1000),
            endtime:this.filters.endtime==''||this.filters.endtime==0||this.filters.endtime==null?'':Math.round(new Date(this.filters.endtime).getTime()/1000),
            pageNo:this.page
          }
        };
        this.$http('sys/user/list.do',obj).then(resp => {
          if(resp.code==1){
            this.users = resp.data.list;
            this.total = resp.data.total;
          }
          this.listLoading = false;
        });
      },
      handleCurrentChange(val) {
        this.page = val;
        this.getUsers();
      },
      addUsers(){
        if(!this.$store.state.routes.routes.xtAdminAdd){
          this.$message({
            message:'无权限',
            type:'error'
          })
          return
        }
        this.addForm = {}
        this.addUsersVisible = true;
      },
      submitAdd(fn){
        this.$refs[fn].validate((valid) => {
          if (valid) {
            this.addLoading = true;
            var obj = {
              data:this.addForm
            }
            this.$http('sys/user/add.do',obj).then(resp => {
              if(resp.code==1){
                this.$message({
                  message:'新建成功',
                  type:'success'
                })
              }else{
                this.$message({
                  message:resp.msg,
                  type:'error'
                })
              }
              this.getUsers()
              this.addLoading = false;
              this.addUsersVisible = false;
            });

          } else {
            return false;
          }
        });
      },
      disableAdmin(index,row){
        if(!this.$store.state.routes.routes.xtAdminState){
          this.$message({
            message:'无权限',
            type:'error'
          })
          return
        }
        var msg = '',toState = 0
        if(row.state == 12){
          msg = '正常'
          toState = 11
        }else{
          msg = '禁用'
          toState = 12
        }
        this.$confirm("确认切换到"+msg+"状态么?", "提示", {})
          .then(() => {
          var obj = {
            data:{
              userid:row.id,
              state:toState
            }
          }
            this.$http('sys/user/modifyState.do',obj).then(resp => {
              if(resp.code==1){
                this.$message({
                  message:'切换成功',
                  type:'success'
                })
              }else{
                this.$message({
                  message:resp.msg,
                  type:'error'
                })
              }
              this.getUsers()
            });

          })
          .catch(() => {});
      },
      delAdmin(index,row){
        if(!this.$store.state.routes.routes.xtAdmindel){
          this.$message({
            message:'无权限',
            type:'error'
          })
          return
        }
        this.$confirm("确认删除该角色么?", "提示", {})
          .then(() => {
            this.$http('sys/user/del.do',{data:{userid:row.id}}).then(resp=>{
              if(resp.code==1){
                this.$message({
                  message:'删除成功',
                  type:'success'
                })
              }else{
                this.$message({
                  message:resp.msg,
                  type:'error'
                })
              }
              this.getUsers()
            })
          })
          .catch(() => {});
      },
      resetPwd(index,row){
        if(!this.$store.state.routes.routes.xtAdminRePwd){
          this.$message({
            message:'无权限',
            type:'error'
          })
          return
        }
        this.userId = row.id
        this.dialogFormVisible = true;
      },
      submitResetPwd(){
        if(this.editForm.oldPwd == ''){
          this.$message({
            message:'不能为空',
            type:'error'
          })
          return
        }
        if(this.editForm.newPwd == ''){
          this.$message({
            message:'不能为空',
            type:'error'
          })
          return
        }
        this.editPwdLoading = true;
        this.$http('sys/user/resetPassword.do',{data:{userid:this.userId,password:this.editForm.oldPwd,rePassword:this.editForm.newPwd}}).then(resp => {
          if(resp.code==1){
            this.$message({
              message:resp.msg,
              type:'success'
            })
          }else{
            this.$message({
              message:resp.msg,
              type:'error'
            })
          }
          this.editPwdLoading = false;
          this.dialogFormVisible = false;
          this.getUsers()
        });
      }
    }
  };
</script>

<style scoped>


  .el-table:hover{
    cursor: pointer !important;
  }
</style>
